<template  #header>
  <el-card style="margin-top: 20px">
    <template>
      <div class="card-header">
        <span>客户信息列表</span>
      </div>
    </template>
    <el-row :gutter="10">
     <el-input
          placeholder="搜索姓名或手机号"
          v-model="searchContent" style="width: 150px;margin-right:10px;" 
        ></el-input
      > 
      
        <el-button size="small" type="primary" @click="handlerSearch"
          >搜索</el-button
        >
        <el-button size="small" type="primary" @click="showAddCustomerDialog"
          >添加</el-button
        >
       <el-button size="small" type="primary" @click="showImportDialog">导入</el-button>

      <el-button size="small" type="primary" @click="showShiftDialog">分配</el-button>

  
    </el-row>
    <el-table
      :data="tableData"
      style="width: 100%"
      highlight-current-row
      row-key="id"
      @row-dblclick="showVisit"
      @current-change="currentRowSelect"
       @selection-change="handleSelectionChange"
    >
    <el-table-column type="selection" width="55" />

      <el-table-column prop="name" label="名称">
        <template #default="scope">
          <i
            class="el-icon-s-flag"
            style="color: red"
            v-if="scope.row.isFlag"
          ></i>
          {{ scope.row.name }}
        </template>
      </el-table-column>

      <el-table-column prop="phone" label="手机" />
      <el-table-column prop="ownArea" label="所属区域" />
      <el-table-column prop="connetState" label="联系状态">
        <template #default="scope">
          <el-tag v-if="scope.row.connetState == 0">{{
            connetStates[scope.row.connetState].label
          }}</el-tag>
          <el-tag type="warning" v-else-if="scope.row.connetState == 1">{{
            connetStates[scope.row.connetState].label
          }}</el-tag>
          <el-tag type="success" v-else-if="scope.row.connetState == 2">{{
            connetStates[scope.row.connetState].label
          }}</el-tag>
          <el-tag type="danger" v-else>{{
            connetStates[scope.row.connetState].label
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="fromType" label="客户类型">
        <template #default="scope">
          {{ scope.row.fromType == 0 ? "直销" : "经销商销售" }}
        </template>
      </el-table-column>
      <!-- <el-table-column prop="adminName" label="所属销售员" />
      <el-table-column prop="dealerName" label="所属经销商" /> -->
      <el-table-column prop="idcard" label="身份证" />
      <el-table-column prop="address" label="详细地址" />
      <el-table-column prop="remark" label="备注" />
      <!-- <el-table-column prop="createAdminName" label="创建人" />
        <el-table-column prop="createDate" label="创建时间" /> -->
      <el-table-column label="操作" width="140">
        <template #default="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            circle
            @click="handleEdit(scope.$index, scope.row)"
          ></el-button>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            circle
            @click="handleDelete(scope.$index, scope.row)"
          ></el-button>
          <el-button
            type="warning"
            circle
            size="mini"
            tips="打标记"
            @click="handleFlag(scope.row.id)"
            icon="el-icon-s-flag"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="float: right; margin-top: 10px"
      :currentPage="currentPage"
      :page-size="10"
      :page-sizes="[10, 20, 100, 500]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
    <CustomerAdd
      :centerDialogVisible="centerDialogVisible"
      @onCloseDialog="closeDialogVisible()"
    ></CustomerAdd>
    <CustomerEdit
      v-if="editDialogVisible === true"
      :customerId="id"
      :editDialogVisible="editDialogVisible"
      @onEditCloseDialog="closeEditDialogVisible"
    ></CustomerEdit>
    <CustomerImport v-if="importDialogVisible === true" :importDialogVisible="importDialogVisible"
      @onCloseImportDialog="closeImportDialog"
    ></CustomerImport>
      <CustomerShift
    v-if="shiftDialogVisible === true"
    :customerId="id"
    :shiftDialogVisible="shiftDialogVisible"
    @onShiftCloseDialog="closeShiftDialogVisible"
    :selectionIds="selectionIds"
  ></CustomerShift> 
  </el-card>
</template>

<script>
import { reactive, toRefs, onMounted, computed } from "vue";
import CustomerAdd from "@/components/cus/CustomerAdd4all.vue";
import CustomerEdit from "@/components/cus/CustomerEdit4all.vue";
import CustomerShift from "@/components/cus/CustomerShift.vue";
import {
  useHandlerEdit,
  useHandleSizeChange,
  useHandleCurrentChange,
  useHandlerSearch,
  useDelete,
  loadData,
  putRequest,
} from "../../utils/api";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import CustomerImport from "../../components/cus/CustomerImport.vue";

export default {
  name: "SysCustomer",
  components: {
    CustomerAdd,
    CustomerEdit,
    CustomerImport,
    CustomerShift
},

  setup(props, { emit }) {
    const baseUrl = "/sell/customer/depository/";
    const state = reactive({
      connetStates: [
        {
          value: 0,
          label: "待沟通",
        },
        {
          value: 1,
          label: "沟通中",
        },
        {
          value: 2,
          label: "已下单",
        },
        {
          value: 3,
          label: "战败",
        },
      ],
      fromTypes: [
        {
          value: 0,
          label: "直销",
        },
        {
          value: 1,
          label: "经销商销售",
        },
      ],
      searchContent: "",
      tableData: [],

      centerDialogVisible: false,
      editDialogVisible: false,
      importDialogVisible:false ,
      shiftDialogVisible:false,
      total: 0,
      pageSize: 10,
      currentPage: 1,
      id: "",
      baseUrl,
      customerName: "",
      currentState: "",
       multipleSelection: [],
      selectionIds:computed(()=>{
        let ids=[];
        state.multipleSelection.forEach((ms)=>{
            ids.push(ms.id);
        })
        return ids ;
      }),
     
    });

    const handleSelectionChange = (val)=> {
      state.multipleSelection = val
    }

    //处理标记信息 标记后数据会显示红旗 并且排在前面
    const handleFlag = (customerId) => {
      putRequest(`/sell/customer/status/${customerId}`).then((res) => {
        if (res) {
          loadData(state, state.baseUrl);
          ElMessage.success({
            type: "success",
            title: "成功",
            message: "操作成功",
            duration: 2000,
          });
        }
      });
    };

    const showAddCustomerDialog = () => {
      state.centerDialogVisible = true;
    };

    const closeDialogVisible = (visible, data) => {
      state.centerDialogVisible = false;
      loadData(state, state.baseUrl);
    };

    const closeEditDialogVisible = (visible, data) => {
      state.editDialogVisible = visible;

      if (data !== undefined) {
        loadData(state, state.baseUrl);
      }
    };
    const closeShiftDialogVisible=(visible,data)=>{
      state.shiftDialogVisible = visible ;

      if(data!==undefined){
        loadData(state,state.baseUrl)
      }
    }

    const currentChange = (pageNo) => {
      state.currentPage = pageNo;
      loadData(state, state.baseUrl);
    };
     const showShiftDialog=()=>{

     

         state.shiftDialogVisible = true ;
     }

    const currentRowSelect = (currentRow, oldCurrentRow) => {
      state.id = currentRow.id;
      state.currentState = currentRow.connetState;
      state.customerName = currentRow.name;
    };

    const handlePreview = (file) => {
     
    };
    const consthandleExceed = (files, fileList) => {
      ElMessage.success(
        `The limit is 3, you selected ${
          files.length
        } files this time, add up to ${files.length + fileList.length} totally`
      );
    };
    const showImportDialog = () => {
        state.importDialogVisible=true ;
    }

    const closeImportDialog = (visible,data)=>{
      state.importDialogVisible = visible ;
      if(data){
         loadData(state, state.baseUrl);
      }
    }

    onMounted(() => {
      loadData(state, state.baseUrl);
    });
    return {
      closeImportDialog,showImportDialog,
      ...toRefs(state), //解构响应式数据
      ...useDelete(state, baseUrl),
      ...useHandlerSearch(state, baseUrl),
      ...useHandlerEdit(state),
      ...useHandleSizeChange(state, baseUrl),
      ...useHandleCurrentChange(state, baseUrl),
      handlePreview,
      consthandleExceed,
      showAddCustomerDialog,
      closeDialogVisible,
      closeEditDialogVisible,
      closeShiftDialogVisible,
      showShiftDialog,
      currentChange,
      currentRowSelect,
      handleFlag,
      handleSelectionChange
    };
  },
};
</script>
<style scoped>
</style>